<template>
    <van-popup v-model:show="props.modelValue" position="right" round :style="{ width: '60%', height: '100%' }"
        @click-overlay="onClickOverlay">
        <div class="right_popup">
            <div>
                <h4>系统设置</h4>
                <div class="right_popup_box">
                    <div class="right_popup_box_item" @click="changePassword">
                        <div class="right_popup_box_item_left">
                            <img src="@/assets/productHome/icon_xiugaimima.png" alt="">
                            <span>修改密码</span>
                        </div>
                        <van-icon name="arrow" color="#B8BECA" />
                    </div>
                    <div class="right_popup_box_item"
                        v-if="userRoles.includes('recruit') || user.user.indexOf('superadmin') != -1"
                        @click="changeHands">
                        <div class="right_popup_box_item_left">
                            <img src="@/assets/productHome/icon_shangpinyizhu.png" alt="">
                            <span>商品易主</span>
                        </div>
                        <van-icon name="arrow" color="#B8BECA" />
                    </div>
                    <div class="right_popup_box_item" @click="goPrivacyAgreement">
                        <div class="right_popup_box_item_left">
                            <img src="@/assets/productHome/icon_yinsixieyi.png" alt="">
                            <span>隐私政策</span>
                        </div>
                        <van-icon name="arrow" color="#B8BECA" />
                    </div>
                    <div class="right_popup_box_item" @click="goPrivacyAgreements">
                        <div class="right_popup_box_item_left">
                            <img src="@/assets/productHome/icon_yonghuxieyi.png" alt="">
                            <span>用户协议</span>
                        </div>
                        <van-icon name="arrow" color="#B8BECA" />
                    </div>
                    <div class="right_popup_box_item" @click="about">
                        <div class="right_popup_box_item_left">
                            <img src="@/assets/productHome/icon_guanyu.png" alt="">
                            <span>关于</span>
                        </div>
                        <van-icon name="arrow" color="#B8BECA" />
                    </div>
                </div>
            </div>
            <div class="quit_button" @click="quit" v-throttle:click>
                <van-image class="quit_cion" :src="quitIcon" />
                退出登录
            </div>
        </div>
    </van-popup>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { userStore } from "@/store/user";
import { loginStore } from "@/store/login";
import { apiLogout } from "@/api/loginApi";
import { showConfirmDialog } from "vant";
const quitIcon = new URL("@/assets/porduct/quit.png", import.meta.url).href;
const router = useRouter();
const user = userStore();
const userRoles = user.user.join(',')
const login = loginStore();

const emit = defineEmits(['update:modelValue'])
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    }
});

// 点击遮罩层时调用的方法
const onClickOverlay = () => {
    emit("update:modelValue", false);
};

/** 退出 */
const quit = () => {
    showConfirmDialog({
        message: "是否确认退出账号",
    }).then(async () => {
        const res = await apiLogout();
        if (res.code === 200) {
            login.resetToken();
            router.push("/login");
        }
    });
};
/** 修改密码 */
const changePassword = () => {
    router.push('/editPassword')
}
/** 关于 */
const about = () => {
    router.push('/aboutMe')
}
/** 用户隐私协议 */
const goPrivacyAgreement = () => {
    router.push({
        path: '/policy'
    });
}
/** 用户用户协议 */
const goPrivacyAgreements = () => {
    router.push({
        path: '/userAgreement'
    });
}
// 商品易主
const changeHands = () => {
    router.push("/changeHands");
}

</script>
<style lang="less" scoped>
.right_popup {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 50px 15px;
    color: #1C1D1E;
    display: flex;
    flex-flow: column;
    justify-content: space-between;

    .right_popup_box {
        width: 100%;

        .right_popup_box_item {
            width: 100%;
            padding: 15px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .right_popup_box_item_left {
                display: flex;
                align-items: center;

                img {
                    width: 14px;
                    height: 14px;
                    margin-right: 20px;
                }
            }
        }
    }

    .login-index-policy-text-rules {
        color: #009EFF;
        font-size: 13px;
        width: 100%;
        margin-top: 65vh;
    }

    .login-index-policy-text-rule {
        color: #009EFF;
        font-size: 13px;
        width: 100%;
    }

    .quit_button {
        width: 100%;
        height: 44px;
        background: #FDE7E7;
        border-radius: 5px;
        text-align: center;
        color: #FC2540;
        line-height: 44px;

        .quit_cion {
            width: 14px;
            height: 14px;
        }
    }
}
</style>